<template>
  <div class="execution">
    <BasicContainer>
      <ElRow :span="24">
        <ElCol :md="3" :sm="24" :xs="24" class="info__tree">
          <FyTree :data="treeData" :option="treeOption" @node-click="nodeClick">
            <template #default="{ node, data }">
              <span class="el-tree-node__label">
                <ElTooltip v-if="data.isLock" class="item" content="无数据权限" effect="dark" placement="right-start">
                  <span>{{ node.label }} <i class="el-icon-lock"></i></span>
                </ElTooltip>
                <span v-if="!data.isLock">{{ node.label }}</span>
              </span>
            </template>
          </FyTree>
        </ElCol>
        <ElCol :md="21" :sm="24" :xs="24" class="info__main">
          <FyCurd
            ref="crud"
            v-model="form"
            :before-open="handleOpenBefore"
            :data="tableData"
            :option="tableOption"
            :page.sync="page"
            :permission="permissionList"
            :table-loading="tableLoading"
            @on-load="getList"
            @search-change="searchChange"
            @refresh-change="refreshChange"
            @size-change="sizeChange"
            @current-change="currentChange"
            @row-update="handleUpdate"
            @row-save="handleSave"
            @row-del="handleDel">
            <template #menu="{ type, size, row }">
              <ElButton
                v-if="permissions.problem_infor_add"
                :size="size"
                :type="type"
                icon="el-icon-edit"
                @click="showRectify(row)">
                整改措施
              </ElButton>
            </template>
            <template #menuLeft>
              <ElButton
                v-if="permissions.problem_infor_export"
                class="filter-item"
                icon="el-icon-download"
                plain
                size="small"
                type="primary"
                @click="exportExcel">
                导出
              </ElButton>
              <ElButton
                v-if="permissions.problem_infor_export"
                class="filter-item"
                plain
                type="primary"
                size="small"
                icon="el-icon-upload"
                @click="$refs.excelUpload.show()">
                导入
              </ElButton>
            </template>
            <template #ctiNameForm="{ disabled }">
              <VueTreeSelect
                v-model="form.ctiId"
                :normalizer="normalizer"
                :disabled="disabled"
                :options="ctiParentData"
                placeholder="问题分类" />
            </template>
            <!-- 附件上传组件{ 需要传入uniqueCode/model/classify} -->
            <template #uploadPageForm>
              <UploadPage
                ref="UploadPage"
                :unique-code="uniqueCode"
                :upload-permissions="permissionList"
                :view-type="viewType"
                classify="info"
                model="problem" />
            </template>
          </FyCurd>
        </ElCol>
      </ElRow>
    </BasicContainer>
    <!--excel 模板导入 -->
    <ExcelUpload
      ref="excelUpload"
      title="问题信息导入"
      url="/problem/infor/import"
      temp-url="/problem/sys-file/local/problemInfo.xlsx"
      temp-name="问题信息导入模板.xlsx"
      @refreshDataList="refreshChange" />
    <ElementDialog :close-on-click-modal="false" :visible.sync="visibleRectify" title="整改措施" top="5%" width="95%">
      <Rectify
        v-if="visibleRectify"
        ref="rectify"
        :problem-infor-id="problemInforId"
        :problem-infor-num="problemInforNum" />
      <template #footer>
        <span class="dialog-footer">
          <ElButton @click="visibleRectify = false">关闭</ElButton>
          <!--<el-button type="primary" @click="checkRowData" >确定</el-button>-->
        </span>
      </template>
    </ElementDialog>
  </div>
</template>

<script>
  import { addObj, delObj, fetchList, putObj } from '@/api/problem/infor'
  import { tree } from '@/api/problem/cti'
  import { tableOption } from '@/const/crud/problem/infor'
  import { mapState } from 'vuex'
  import { getUUID } from '@/api/admin/uuid'

  import Rectify from '@/module/problem/rectify/index'

  export default {
    name: 'InforModel',
    components: {
      Rectify
    },
    data() {
      return {
        searchForm: {},
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        treeOption: {
          nodeKey: 'id',
          addBtn: false,
          menu: false,
          props: {
            label: 'name',
            value: 'id'
          }
        },
        treeData: [],
        tableLoading: false,
        tableOption,
        ctiParentData: [],
        form: {},
        uniqueCode: '',
        visibleRectify: false,
        problemInforId: -1,
        problemInforNum: '',
        viewType: ''
      }
    },
    computed: {
      ...mapState('user', ['permissions']),
      permissionList() {
        return {
          addBtn: this.$isEmpty(this.permissions.problem_infor_add, false),
          delBtn: this.$isEmpty(this.permissions.problem_infor_del, false),
          editBtn: this.$isEmpty(this.permissions.problem_infor_edit, false),
          downloadBtn: this.$isEmpty(this.permissions.problem_infor_download, false)
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        tree().then(response => {
          this.treeData = response.data.data
        })
      },
      nodeClick(data) {
        this.page.page = 1
        // console.log(data)
        this.getList(this.page, { ctiCode: data.code })
      },
      // 列表查询
      getList(page, params) {
        this.tableLoading = true
        fetchList(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize
            },
            params,
            this.searchForm
          )
        )
          .then(response => {
            this.tableData = response.data.data.records
            this.page.total = response.data.data.total
            this.tableLoading = false
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      // 删除
      handleDel: function (row, index) {
        this.$confirm(`是否确认删除ID为${row.id}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(function () {
            return delObj(row.id)
          })
          .then(data => {
            this.$message.success('删除成功')
            this.getList(this.page)
          })
      },
      // 更新
      handleUpdate: function (row, index, done, loading) {
        putObj(row)
          .then(data => {
            this.$message.success('修改成功')
            done()
            this.getList(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      // 保存
      handleSave: function (row, done, loading) {
        if (row.ctiId === undefined || Number.isNaN(row.ctiId)) {
          this.$message.success('请选择问题分类')
          return
        }
        addObj(row)
          .then(data => {
            this.$message.success('添加成功')
            done()
            this.getList(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      // 每页条数改变事件
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      // 当前页发生改变事件
      currentChange(current) {
        this.page.currentPage = current
      },
      // 查询事件
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      // 刷新事件
      refreshChange() {
        this.getList(this.page)
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }

        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      //  导出excel
      exportExcel() {
        const date = this.dateFormat(new Date())
        this.downBlobFile('/problem/infor/export', this.searchForm, `问题详情_${date}.xlsx`, 'post')
      },
      handleOpenBefore(show, type) {
        window.boxType = type
        this.viewType = type
        tree().then(response => {
          this.ctiParentData = response.data.data
          // console.log(this.ctiParentData)
        })
        // 添加附件参数
        if (type === 'edit') {
          this.uniqueCode = this.form.unid
          // this.tableOption.column[7].display = true
        } else {
          // this.tableOption.column[7].display = false
          getUUID().then(response => {
            this.uniqueCode = response.data.data
            this.form.unid = response.data.data
          })
        }
        show()
      },
      // 显示整改措施
      showRectify(row) {
        this.problemInforId = parseInt(row.id)
        this.problemInforNum = row.number
        this.visibleRectify = true
        // this.$router.push({ path: '/problem/feedback/form/3'})
        // this.$nextTick(() => {
        //   this.$refs.rectify.openAddDialog()
        // })
      }
    }
  }
</script>

<style lang="scss">
  .info {
    height: 100%;

    &__tree {
      padding-top: 3px;
      padding-right: 20px;
    }

    &__main {
      .el-card__body {
        padding-top: 0;
      }
    }
  }
</style>
